<template>
  <base-paenl>
    <span slot="header">楼房信息</span>
    <div slot="main" class="slot-main">
      <div
        v-for="(item, index) of dataList"
        :key="index"
        class="panel-item"
        @click="showDialog(item)"
      >
        <div
          :class="
            ['租赁房源入统数', '房源发布数', '保障性住房数'].includes(item.name)
              ? 'panel-row clickable'
              : 'panel-row'
          "
        >
          <div class="panel-row-bg"></div>
          <div class="panel-row-content">
            <div
              class="panel-row-content-name panel-row-content-name1"
              :title="item.name"
            >
              {{ item.name }}
            </div>
            <div
              class="panel-row-content-value panel-row-content-value1"
              :title="item.value"
            >
              {{ item.value }}
            </div>
          </div>
        </div>
        <div
          v-if="item.children"
          :class="
            ['租赁房源入统数', '房源发布数'].includes(item.name)
              ? 'panel-second-row clickable'
              : 'panel-second-row'
          "
        >
          <div
            v-for="(subItem, subIndex) of item.children"
            :key="subIndex"
            class="panel-second-content panel-second-content1"
          >
            <img
              src="../../assets/images/panels/xiaobiaotitubiao.png"
              width="12px"
              height="12px"
            />
            <div class="panel-second-content-name">{{ subItem.name }}</div>
            <div class="panel-second-content-value">{{ subItem.value }}</div>
          </div>
        </div>
      </div>
    </div>
  </base-paenl>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import BasePaenl from "./CBase.vue";
import { getBuildingInfo } from "@/assets/modules/service";
// import mockData from "@/static/json/mockData.json";
// import axios from "axios";

@Component({
  name: "BuildingInformation",
  components: { BasePaenl }
})
export default class extends Vue {
  get datePickerValue() {
    return this.$store.getters["panelData/datePickerValue"];
  }
  get areaData() {
    return this.$store.getters["panelData/areaData"];
  }
  @Watch("areaData", { deep: true })
  handleAreaData(val: any) {
    this.getBuildingInfo(val.gridId);
  }
  dataList: any = [];
  mounted() {
    const win: any = window;
    this.dataList = win.dataConfig.buildingInformation;
    // this.getBuildingInfo();
  }
  getBuildingInfo(val: string) {
    const data: any = {
      kssj: this.datePickerValue[0] ?? "",
      jssj: this.datePickerValue[1] ?? "",
      code: this.areaData.areaCode,
      gridId: this.areaData.gridId,
      queryType: this.areaData.queryType,
      geoJson: this.areaData.geoJson,
      areaType: this.areaData.areaType,
      areaName: this.areaData.areaName,
      sqCodeList: this.areaData.sqCodeList
    };
    // 不需要加statis文件
    // axios.get("/json/mockData.json").then((resData: any) => {
    //   const res = resData.data[val].buildingInfo;
    //   if (res?.data) {
    //     this.dataList.ldsl.value = res.data.ldsl;
    //     this.dataList.fwts.value = res.data.fwts;
    //     this.dataList.zlfwrts.value = res.data.zlfyrts;
    //     this.dataList.zlfwrts.children.hys.value = res.data.hys;
    //     this.dataList.zlfwrts.children.cjs.value = res.data.cjs;
    //     this.dataList.fyfbs.value = res.data.fyfbs;
    //     this.dataList.fyfbs.children.dqfbs.value = res.data.dqfbs;
    //     this.dataList.fyfbs.children.ljfbs.value = res.data.ljfbs;
    //     this.dataList.bzxzfs.value = res.data.bzxzfs;
    //     this.dataList.zcxschfwsl.value = res.data.zcxschfysl;
    //     this.dataList.gfsl.value = res.data.gfsl;
    //     this.dataList.gfsl.children.zzs.value = res.data.zzs;
    //     this.dataList.gfsl.children.fzzs.value = res.data.fzzs;
    //     this.dataList.wfsl.value = res.data.wfsl;
    //   } else {
    //     this.dataList.ldsl.value = 0;
    //     this.dataList.fwts.value = 0;
    //     this.dataList.zlfwrts.value = 0;
    //     this.dataList.zlfwrts.children.hys.value = 0;
    //     this.dataList.zlfwrts.children.cjs.value = 0;
    //     this.dataList.fyfbs.value = 0;
    //     this.dataList.fyfbs.children.dqfbs.value = 0;
    //     this.dataList.fyfbs.children.ljfbs.value = 0;
    //     this.dataList.bzxzfs.value = 0;
    //     this.dataList.zcxschfwsl.value = 0;
    //     this.dataList.gfsl.value = 0;
    //     this.dataList.gfsl.children.zzs.value = 0;
    //     this.dataList.gfsl.children.fzzs.value = 0;
    //     this.dataList.wfsl.value = 0;
    //   }
    // });
    getBuildingInfo(data).then((res: any) => {
      if (res?.data) {
        this.dataList.ldsl.value = res.data.ldsl;
        this.dataList.fwts.value = res.data.fwts;
        this.dataList.zlfwrts.value = res.data.zlfyrts;
        this.dataList.zlfwrts.children.hys.value = res.data.hys;
        this.dataList.zlfwrts.children.cjs.value = res.data.cjs;
        this.dataList.fyfbs.value = res.data.fyfbs;
        this.dataList.fyfbs.children.dqfbs.value = res.data.dqfbs;
        this.dataList.fyfbs.children.ljfbs.value = res.data.ljfbs;
        this.dataList.bzxzfs.value = res.data.bzxzfs;
        this.dataList.zcxschfwsl.value = res.data.zcxschfysl;
        this.dataList.gfsl.value = res.data.gfsl;
        this.dataList.gfsl.children.zzs.value = res.data.zzs;
        this.dataList.gfsl.children.fzzs.value = res.data.fzzs;
        this.dataList.wfsl.value = res.data.wfsl;
      } else {
        this.dataList.ldsl.value = 0;
        this.dataList.fwts.value = 0;
        this.dataList.zlfwrts.value = 0;
        this.dataList.zlfwrts.children.hys.value = 0;
        this.dataList.zlfwrts.children.cjs.value = 0;
        this.dataList.fyfbs.value = 0;
        this.dataList.fyfbs.children.dqfbs.value = 0;
        this.dataList.fyfbs.children.ljfbs.value = 0;
        this.dataList.bzxzfs.value = 0;
        this.dataList.zcxschfwsl.value = 0;
        this.dataList.gfsl.value = 0;
        this.dataList.gfsl.children.zzs.value = 0;
        this.dataList.gfsl.children.fzzs.value = 0;
        this.dataList.wfsl.value = 0;
      }
    });
  }
  showDialog(item: any) {
    if (
      parseInt(this.datePickerValue.substring(4, 6)) <
      new Date().getMonth() + 1
    ) {
    } else {
      let floorSiteData: any = {
        name: "",
        children: []
      };
      if (
        ["租赁房源入统数", "房源发布数", "保障性住房数"].includes(item.name)
      ) {
        floorSiteData = JSON.parse(JSON.stringify(item));
        this.$store.commit("panel/setDialogShow", false);
        this.$nextTick(() => {
          this.$store.commit("panel/setDialogShow", true);
          this.$store.commit("panel/setDialog", "floorSite");
          this.$store.commit("panelData/setFloorSiteData", floorSiteData);
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.slot-main {
  height: 362px;
}
</style>
<style>
.clickable {
  cursor: pointer;
}
</style>
